<template>
	<view class="my-button" @click="handleClick">
		<view
			:class="[type == 'text'&&'text-btn'||type == 'plain'&&'plain-btn'||type == 'inform'&&'plain-inform'||'button' ]"
			:style="[{ width: width + 'rpx' }, { height: height + 'rpx' }, { 'line-height': height + 'rpx' },{'background':bg}]"
		>
			<slot>确认</slot>
		</view>
	</view>
</template>

<script>
export default {
	name: 'my-button',
	data() {
		return {};
	},
	props: {
		width: {
			type: String,
			default: '160'
		},
		height: {
			type: String,
			default: '64'
		},
		plain: {
			type: Boolean,
			default: false
		},
		type: {
			type: String
		},
		bg:''
	},
	methods: {
		handleClick() {
			this.$emit('click');
		}
	}
};
</script>

<style lang="scss">
.button {
	text-align: center;
	color: #ffffff;
	background: linear-gradient(270deg, #46a9ff 0%, #0587fa 100%);
	border-radius: 32rpx;
	font-size: 28rpx;
	margin-left: 20rpx;
}
.text-btn {
	text-align: center;
	color: #0089ff;
	font-size: 28rpx;
}
.button:hover {
	text-align: center;
	color: #ffffff;
	background: linear-gradient(270deg, #388dce 0%, #006ad4 100%);
	border-radius: 32rpx;
	font-size: 28rpx;
	margin-left: 20rpx;
}
.plain-btn {
	text-align: center;
	border-radius: 32rpx;
	font-size: 28rpx;
	border: 2rpx solid #0587fa;
	color: #45afff;
	margin-left: 20rpx;
}
.plain-inform {
	text-align: center;
	border-radius: 32rpx;
	font-size: 28rpx;
	color: #ffffff;
	background: #e18e18;
	margin-left: 20rpx;
}
.plain-btn:hover {
	text-align: center;
	border-radius: 32rpx;
	font-size: 28rpx;
	border: 2rpx solid #0587fa;
	color: #0587fa;
	margin-left: 20rpx;
}
</style>
